<template>
  <div class="hot-sider">
    <div class="title">
      <h1 class="title-text">推荐</h1>
    </div>
    <div class="link-list">
      <div class="button-group">
        <a-button type="text" size="large" class="button-with-icon">
          <template #icon><FireOutlined /></template>热门推荐</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { FireOutlined } from "@ant-design/icons-vue";
</script>

<style scoped>
.title-text {
  font-size: 20px;
  font-weight: 550;
}

.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:deep(.button-with-icon .ant-btn-icon) {
  margin-right: 8px; /* 图标和文字之间留点空隙 */
}

/* 按钮文字样式 */
:deep(.button-with-icon) {
  font-size: 16px !important;
  color: #398bfb !important;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 内容左对齐 */
  text-align: left; /* 确保文字左对齐 */
  padding-left: 0; /* 去掉默认内边距影响对齐 */
}
</style>
